<template>
<!--  :props="props"  配置选项，具体看下表
           label    指定节点标签为节点对象的某个属性值
           children  指定子树为节点对象的某个属性值
           isLeaf 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
 -->
<!--  :load="loadNode"
           加载子树数据的方法，仅当 lazy 属性为true 时生效
           自动执行函数 -- 异步请求数据
           -->
<!--  lazy    是否懒加载子节点，需与 load 方法结合使用 -->
<!--  show-checkbox   节点是否可以被选择      -->
<!--  accordion 是否每次只打开一个同级节点展开-->
  <el-tree
      :props="props"
      :load="loadNode"
      lazy
      accordion
      @node-click="nodeClick"
      >
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',  //指定数据的字段  如果label是title  下面函数的name就是title
        children: 'zones',
        isLeaf: 'leaf'
      },
    };
  },
  methods: {
    // 点击tree 获取数据
    nodeClick(data,node){
      //传递数据给父组件
      this.$emit("sendTreeData",data)

    },
    loadNode(node, resolve) {  // resolve() 成功的返回数据结果
      console.log(node)
      if (node.level === 0) {
        //进入页面 获取第一层的tree数据
        this.$api.getSelectCategory()
            .then(res=>{
              console.log(res.data)
              return resolve(res.data.result);
        })

      }

      if (node.level == 1) {
        //进入页面 获取第一层的tree数据
        this.$api.getSelectCategory({
          id:node.data.uid
        })
            .then(res=>{
              console.log("二级",res.data)
              return resolve(res.data.result);
            })

      }


    }
  }
};
</script>

<style lang="less" scoped>


</style>
